<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>定位(position)(确定元素的位置) |  zfy的个人博客</title>
    <meta name="generator" content="VuePress 1.9.7">
    <link rel="icon" href="./img/Scorpio.png">
    <link rel="stylesheet" href="./css/style.css">
    <meta name="description" content="My tech blog">
    
    <link rel="preload" href="./assets/css/0.styles.cfdaa54c.css" as="style"><link rel="preload" href="./assets/js/app.7878252f.js" as="script"><link rel="preload" href="./assets/js/2.877879cc.js" as="script"><link rel="preload" href="./assets/js/25.fbe72655.js" as="script"><link rel="prefetch" href="./assets/js/10.a489e96f.js"><link rel="prefetch" href="./assets/js/11.f6f26a2f.js"><link rel="prefetch" href="./assets/js/12.8a827e29.js"><link rel="prefetch" href="./assets/js/13.e420b04a.js"><link rel="prefetch" href="./assets/js/14.52f00cc6.js"><link rel="prefetch" href="./assets/js/15.ef68d553.js"><link rel="prefetch" href="./assets/js/16.c2999dfd.js"><link rel="prefetch" href="./assets/js/17.0adb748c.js"><link rel="prefetch" href="./assets/js/18.2c077020.js"><link rel="prefetch" href="./assets/js/19.013b5e02.js"><link rel="prefetch" href="./assets/js/20.bb3b854e.js"><link rel="prefetch" href="./assets/js/21.28efc78c.js"><link rel="prefetch" href="./assets/js/22.4a1d71dd.js"><link rel="prefetch" href="./assets/js/23.605a5451.js"><link rel="prefetch" href="./assets/js/24.66bf035d.js"><link rel="prefetch" href="./assets/js/26.3f374d1f.js"><link rel="prefetch" href="./assets/js/27.556ea617.js"><link rel="prefetch" href="./assets/js/28.0cab868b.js"><link rel="prefetch" href="./assets/js/29.564f8747.js"><link rel="prefetch" href="./assets/js/3.4cfb1b9c.js"><link rel="prefetch" href="./assets/js/30.c4a099d1.js"><link rel="prefetch" href="./assets/js/31.7fbc3d2a.js"><link rel="prefetch" href="./assets/js/32.8f356b20.js"><link rel="prefetch" href="./assets/js/33.b5a1b0bb.js"><link rel="prefetch" href="./assets/js/34.57086c2e.js"><link rel="prefetch" href="./assets/js/35.2b4d0231.js"><link rel="prefetch" href="./assets/js/36.a99f6d64.js"><link rel="prefetch" href="./assets/js/37.eb25dcef.js"><link rel="prefetch" href="./assets/js/38.e45d8594.js"><link rel="prefetch" href="./assets/js/39.213e3a72.js"><link rel="prefetch" href="./assets/js/4.b86a0fbe.js"><link rel="prefetch" href="./assets/js/40.cadafdd6.js"><link rel="prefetch" href="./assets/js/41.23b0f26d.js"><link rel="prefetch" href="./assets/js/42.7c2b83c6.js"><link rel="prefetch" href="./assets/js/43.62f328ea.js"><link rel="prefetch" href="./assets/js/44.c4dfbd34.js"><link rel="prefetch" href="./assets/js/45.cde5bb22.js"><link rel="prefetch" href="./assets/js/46.6c62bdb8.js"><link rel="prefetch" href="./assets/js/47.4857766a.js"><link rel="prefetch" href="./assets/js/48.55a0cccc.js"><link rel="prefetch" href="./assets/js/49.3dceda91.js"><link rel="prefetch" href="./assets/js/5.13776f82.js"><link rel="prefetch" href="./assets/js/50.ab4d52fa.js"><link rel="prefetch" href="./assets/js/51.69ccc35a.js"><link rel="prefetch" href="./assets/js/52.01f3f711.js"><link rel="prefetch" href="./assets/js/53.c146a1ff.js"><link rel="prefetch" href="./assets/js/54.71ce70c2.js"><link rel="prefetch" href="./assets/js/55.98ef481d.js"><link rel="prefetch" href="./assets/js/56.b23daa51.js"><link rel="prefetch" href="./assets/js/57.6aa314ad.js"><link rel="prefetch" href="./assets/js/58.7d6367d9.js"><link rel="prefetch" href="./assets/js/59.88894cf5.js"><link rel="prefetch" href="./assets/js/6.93d89692.js"><link rel="prefetch" href="./assets/js/60.111f9a04.js"><link rel="prefetch" href="./assets/js/61.add82aab.js"><link rel="prefetch" href="./assets/js/62.8bfac830.js"><link rel="prefetch" href="./assets/js/63.db44a5ca.js"><link rel="prefetch" href="./assets/js/64.0244f0ef.js"><link rel="prefetch" href="./assets/js/65.2be994de.js"><link rel="prefetch" href="./assets/js/66.c5066e37.js"><link rel="prefetch" href="./assets/js/67.c11b474b.js"><link rel="prefetch" href="./assets/js/68.276bdc3e.js"><link rel="prefetch" href="./assets/js/69.f5f39d50.js"><link rel="prefetch" href="./assets/js/7.ca9f7e96.js"><link rel="prefetch" href="./assets/js/70.e3ca02b0.js"><link rel="prefetch" href="./assets/js/71.befcf8f7.js"><link rel="prefetch" href="./assets/js/72.04fabafd.js"><link rel="prefetch" href="./assets/js/73.e5b707f2.js"><link rel="prefetch" href="./assets/js/74.b5668150.js"><link rel="prefetch" href="./assets/js/75.eb7cfac9.js"><link rel="prefetch" href="./assets/js/76.c1b76370.js"><link rel="prefetch" href="./assets/js/77.5875e953.js"><link rel="prefetch" href="./assets/js/78.a5e2fa5b.js"><link rel="prefetch" href="./assets/js/79.eb2d51a7.js"><link rel="prefetch" href="./assets/js/8.570c39ea.js"><link rel="prefetch" href="./assets/js/80.7252ac50.js"><link rel="prefetch" href="./assets/js/81.eb980d26.js"><link rel="prefetch" href="./assets/js/82.9e069d8f.js"><link rel="prefetch" href="./assets/js/83.8c5a6dc6.js"><link rel="prefetch" href="./assets/js/84.26baaa09.js"><link rel="prefetch" href="./assets/js/85.96bc7e77.js"><link rel="prefetch" href="./assets/js/86.9c9dd1ca.js"><link rel="prefetch" href="./assets/js/87.d54639b8.js"><link rel="prefetch" href="./assets/js/88.3d3ae1e1.js"><link rel="prefetch" href="./assets/js/89.a81caa83.js"><link rel="prefetch" href="./assets/js/9.7a58df3d.js"><link rel="prefetch" href="./assets/js/90.c3c347ed.js"><link rel="prefetch" href="./assets/js/91.b6240032.js"><link rel="prefetch" href="./assets/js/92.8331718a.js"><link rel="prefetch" href="./assets/js/93.ca174cfa.js"><link rel="prefetch" href="./assets/js/94.fec3300c.js"><link rel="prefetch" href="./assets/js/95.076b06fb.js"><link rel="prefetch" href="./assets/js/96.8ed8b32f.js">
    <link rel="stylesheet" href="./assets/css/0.styles.cfdaa54c.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/./" class="home-link router-link-active"><!----> <span class="site-name"> zfy的个人博客</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="http://127.0.0.1:3002/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  自由博客板块
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="http://zfyangelo.gitee.io/yu-weather-web-show/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  天气预报
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="/./guide/" class="nav-link router-link-active">
  个人的学习笔记
</a></div><div class="nav-item"><a href="/./baodian/interview/" class="nav-link">
  项目及在校经历
</a></div><div class="nav-item"><a href="/./baodian/talk/" class="nav-link">
  爱好和联系方式
</a></div><div class="nav-item"><a href="https://gitee.com/zfyangelo" target="_blank" rel="noopener noreferrer" class="nav-link external">
  我的gitee
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="http://127.0.0.1:3002/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  自由博客板块
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="http://zfyangelo.gitee.io/yu-weather-web-show/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  天气预报
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="/./guide/" class="nav-link router-link-active">
  个人的学习笔记
</a></div><div class="nav-item"><a href="/./baodian/interview/" class="nav-link">
  项目及在校经历
</a></div><div class="nav-item"><a href="/./baodian/talk/" class="nav-link">
  爱好和联系方式
</a></div><div class="nav-item"><a href="https://gitee.com/zfyangelo" target="_blank" rel="noopener noreferrer" class="nav-link external">
  我的gitee
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>HTML</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>CSS</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/./guide/notes/css/03-CSS基本样式和选择器.html" class="sidebar-link">01-CSS基本样式和选择器</a></li><li><a href="/./guide/notes/css/04-盒模型.html" class="sidebar-link">02-CSS盒模型</a></li><li><a href="/./guide/notes/css/05-行内盒模型.html" class="sidebar-link">03-行内盒模型</a></li><li><a href="/./guide/notes/css/06-显示样式.html" class="sidebar-link">04-显示样式</a></li><li><a href="/./guide/notes/css/07-背景样式.html" class="sidebar-link">05-背景样式</a></li><li><a href="/./guide/notes/css/08-圆角渐变.html" class="sidebar-link">06-圆角渐变</a></li><li><a href="/./guide/notes/css/09-浮动.html" class="sidebar-link">07-浮动</a></li><li><a href="/./guide/notes/css/10-定位.html" class="active sidebar-link">08-定位</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/./guide/notes/css/css样式书写顺序和命名规范.html" class="sidebar-link">09-css样式书写顺序和命名规范</a></li><li><a href="/./guide/notes/css/13-高级选择器和伪元素.html" class="sidebar-link">11-高级选择器和伪元素</a></li><li><a href="/./guide/notes/css/14-动画样式.html" class="sidebar-link">12-动画样式</a></li><li><a href="/./guide/notes/css/15-transform.html" class="sidebar-link">13-transform</a></li><li><a href="/./guide/notes/css/16-3d和盒阴影和遮罩.html" class="sidebar-link">14-3D盒阴影和遮罩</a></li><li><a href="/./guide/notes/css/17-弹性盒模型.html" class="sidebar-link">15-弹性盒模型</a></li><li><a href="/./guide/notes/css/18-阿里图标 组件化 swiper.html" class="sidebar-link">16-阿里图标 组件化 swiper</a></li><li><a href="/./guide/notes/css/19-响应式.html" class="sidebar-link">17-响应式</a></li><li><a href="/./guide/notes/css/less.html" class="sidebar-link">less</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Javascipt</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>HTML&amp;CSS练习</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Javascipt练习</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h3 id="定位-position-确定元素的位置"><a href="#定位-position-确定元素的位置" class="header-anchor">#</a> 定位(position)(确定元素的位置)</h3> <p>定位是一种更高级的布局手段</p> <p>​	通过定位可以将元素把摆放在页面的任意位置</p> <p>​	 使用position属性来设置定位来设置定位</p> <p>​				可选值</p> <p>​							static默认值                                                                                                                 元素是静止的没有开启定位</p> <p>​							relative  开启元素的相对定位</p> <p>​							absoluted  开启元素的绝对定位</p> <p>​							fixed  开启元素的固定定位</p> <h3 id="静态定位-static"><a href="#静态定位-static" class="header-anchor">#</a> 静态定位(static)</h3> <blockquote><p>static，无特殊定位，它是html元素默认的定位方式.</p> <p>即我们不设定元素的position属性时默认的position值就是static，它遵循正常的文档流对象.</p> <p>该定位方式下,top,right,bottom,left,z-index等属性是无效的。</p></blockquote> <h3 id="相对定位-position-relative"><a href="#相对定位-position-relative" class="header-anchor">#</a> 相对定位(position:relative)</h3> <p><strong>参照自己当前的位置去进行移动</strong>.</p> <p>我们以前学过几种布局方式</p> <blockquote><p>浮动  从左往右依次排列</p> <p>正常布局  从上往下依次排</p> <p>display:inline-block  看上去水平排列,本质上还是文本,有解析空格和垂直对齐的问题</p></blockquote> <p><strong>1.参照物:用来确定物体位置的基点</strong></p> <p><strong>2.根据参照物,描述位置偏移量</strong></p> <p><strong>相对定位的特点</strong></p> <p>​				1.元素开启相对定位后,如果不设置偏移量元素不会发生任何的变化</p> <p>​				2.相对定位参照元素在文档流中自身的位置进行定位</p> <p>​				4.相对定位不会脱离文档流,相对移动的时候,不会影响其他元素布局,只					是这个盒子表现在页面的位置发生了改变.</p> <p>​				5.相对定位不会改变元素的性质，块还是块，行内还是行内</p> <p>​				6.相对定位会提升元素的层级</p> <hr> <h3 id="绝对定位-position-absolute"><a href="#绝对定位-position-absolute" class="header-anchor">#</a> 绝对定位(position:absolute)</h3> <blockquote><p>绝对定位的位置参照物坐标:标志性建筑物</p> <p>请先去参照物的位置,然后从这个位置出发,找到目标位置.</p> <p>绝对定位的写法特点</p> <p>父相子绝</p> <p>父亲设置相对定位,子元素设置绝对定位相对于父亲去移动自身的位置.</p></blockquote> <p><strong>绝对定位的参照物特点</strong></p> <blockquote><p>有定位属性的最近的祖先(父级/父级的父级/父级的父级的父级)元素,</p> <p><strong>有定位属性就</strong>代表position:relative/position/fixed(有这其中一个,才能被子元素所参照)</p> <p>最近:一层一层往外面去寻找父级最终找到视口</p></blockquote> <blockquote><p>偏移量相对于参照父级的padding-box来计算位置.(包含padding不包含border)来进行计算的</p> <p>绝对定位元素会脱离文档流,不保留位置,同级绝对定位盒子叠加,后写的在上面</p> <p>块级化:将元素强行转化为块级元素,它具有块元素的所有性质,但是不具有父元素宽度100%的特性,而是由里面的元素撑开的,</p> <p>绝对定位会让浮动失效</p></blockquote> <h3 id="固定定位-position-fixed"><a href="#固定定位-position-fixed" class="header-anchor">#</a> 固定定位(position:fixed)</h3> <blockquote><p>我们又叫它牛皮糖,扫地阿姨搞半天都刮不下来,无论怎么搞它就在那里.</p> <p>我们网页上也有这样的牛皮糖.就好像粘在你的屏幕上一样.怎么动它就在那里.</p> <p>这与绝对定位的工作方式完全相同，只有一个<strong>主要区别</strong>：</p> <p>绝对定位的固定元素是相对于HTML元素或其最近的定位祖先.</p> <p><strong>而固定定位的固定元素则是相对于浏览器视口本身。</strong></p> <p>固定定位元素不会随着网页滚动条滚动而滚动</p></blockquote> <div class="language-css line-numbers-mode"><pre class="language-css"><code>		<span class="token selector">body</span><span class="token punctuation">{</span>
			<span class="token property">height</span><span class="token punctuation">:</span> 2000px<span class="token punctuation">;</span>
		<span class="token punctuation">}</span>
		<span class="token selector">span</span><span class="token punctuation">{</span>
			<span class="token property">position</span><span class="token punctuation">:</span> fixed<span class="token punctuation">;</span>
			<span class="token property">right</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
			<span class="token property">bottom</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
			<span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
			<span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
			<span class="token property">background-color</span><span class="token punctuation">:</span> skyblue<span class="token punctuation">;</span>	
		<span class="token punctuation">}</span>
	&lt;span&gt;是兄弟就来砍我&lt;/span&gt;

<span class="token comment">/*固定定位参照绝对定位理解,同样有块状化,脱离文档流等等特点.
  就是除了参照物的不同其他几乎相同.*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><hr> <h3 id="七层层叠结构"><a href="#七层层叠结构" class="header-anchor">#</a> 七层层叠结构</h3> <blockquote><p><strong>背景层</strong></p> <p>最底层的东西,背景就好像你给墙涂上油漆贴上墙纸,最后去挂画的时候,你见过把画挂在墙纸里面的吗?</p> <p><strong>==&gt; 块级元素(block)层级 ==&gt;  float浮动层 ==》 文本(inline/inline-block)层级  ==&gt;  position定位层级</strong></p> <p>定位层级就如何一个图钉去钉在某些元素上面一样.</p> <p>这里只有5层层叠结构,这里position层级因为有z-index的参与而变得不同,</p> <p>同样是定位层级,后写的元素同样会盖住先写的元素,</p> <p>如果我们想修改元素的覆盖关系的时候,我们需要去修改HTML结构.</p> <p>但是如果有一叠钞票,一张叠着一张的,我们这时想要放在下面的第二张钞票的时候,第二张钞票就凸显出来.怎么办呢?</p> <p>那就必须比第一张高,怎么比第一张高.</p> <p>我们就需要动态的去调整层级关系.Z-index控制定位元素谁高谁低的操作.</p> <p><code>z-index</code>属性值并不是在任何元素上都有效果。</p> <p>它<strong>仅在</strong>定位元素（定义了<code>position</code>属性，且属性值为非<code>static</code>值的元素）上有效果。</p> <p>判断元素在<code>Z轴</code>上的堆叠顺序，不仅仅是直接比较两个元素的<code>z-index</code>值的大小，这个堆叠顺序实际由元素的<strong>层叠上下文</strong>、<strong>层叠等级</strong>共同决定。</p> <p><strong>z-index默认为0(auto),</strong></p> <p><strong>可以大于等于0的正整数  数值越大越层级越高,只在定位元素内生效</strong></p> <p><strong>也是可以写小于0的负整数,层级是最低的.</strong></p></blockquote> <div class="language-css line-numbers-mode"><pre class="language-css"><code>		<span class="token selector">ul</span><span class="token punctuation">{</span>
			<span class="token property">width</span><span class="token punctuation">:</span> 600px<span class="token punctuation">;</span>
			<span class="token property">height</span><span class="token punctuation">:</span> 600px<span class="token punctuation">;</span>
			<span class="token property">margin</span><span class="token punctuation">:</span> 100px auto 0<span class="token punctuation">;</span>
			<span class="token property">border</span><span class="token punctuation">:</span> 2px solid pink<span class="token punctuation">;</span>
		<span class="token punctuation">}</span>
		<span class="token selector">.bro1</span><span class="token punctuation">{</span>
			<span class="token property">height</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
			<span class="token property">background-color</span><span class="token punctuation">:</span> skyblue<span class="token punctuation">;</span>
		<span class="token punctuation">}</span>
		<span class="token selector">.bro2</span><span class="token punctuation">{</span>
			<span class="token property">margin-top</span><span class="token punctuation">:</span>-100px<span class="token punctuation">;</span>
			<span class="token property">height</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
			<span class="token property">background-color</span><span class="token punctuation">:</span> lightgreen<span class="token punctuation">;</span>
		<span class="token punctuation">}</span>
		<span class="token selector">.bro3</span><span class="token punctuation">{</span>
			<span class="token property">margin-top</span><span class="token punctuation">:</span>-100px<span class="token punctuation">;</span>
			<span class="token property">height</span><span class="token punctuation">:</span>200px<span class="token punctuation">;</span>
			<span class="token property">background-color</span><span class="token punctuation">:</span> pink<span class="token punctuation">;</span>
		<span class="token punctuation">}</span>
 	&lt;ul&gt;
        &lt;li class=<span class="token string">&quot;bro1&quot;</span>&gt;1&lt;/li&gt;
        &lt;li class=<span class="token string">&quot;bro2&quot;</span>&gt;2&lt;/li&gt;
        &lt;li class=<span class="token string">&quot;bro3&quot;</span>&gt;3&lt;/li&gt;
    &lt;/ul&gt;
	<span class="token comment">/*此时2的一部分在1的下面,3的一部分在2的下面.像不像叠着的钞票?
	  如果我们想让我们鼠标悬浮在哪个元素哪个元素就露出来*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br></div></div><div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">li:hover</span><span class="token punctuation">{</span><span class="token property">position</span><span class="token punctuation">:</span>relative<span class="token punctuation">;</span><span class="token punctuation">}</span>
	<span class="token comment">/*鼠标放上去的时候元素层级变高了
	  但是如果这些元素全部都写上了position:relative呢?*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">li</span><span class="token punctuation">{</span><span class="token property">position</span><span class="token punctuation">:</span>relative<span class="token punctuation">;</span><span class="token punctuation">}</span>
<span class="token comment">/*就不能控制元素显示的高低了.
  我们就可以去使用z-index*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">li:hover</span><span class="token punctuation">{</span><span class="token property">z-index</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span><span class="token punctuation">}</span>
<span class="token comment">/*当鼠标悬浮在上面的时候.层级就发生改变
  此时我们写上z-index为0,元素显示不会发生改变,说明默认确实是0*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>假如我们z-index写上负数呢?</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">li:hover</span><span class="token punctuation">{</span><span class="token property">z-index</span><span class="token punctuation">:</span> -1<span class="token punctuation">;</span><span class="token punctuation">}</span>
<span class="token comment">/*当我们鼠标放到元素上就会被其它元素盖住*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>或者你可以自己去修改元素的z-index</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.bro2</span><span class="token punctuation">{</span>
	<span class="token property">z-index</span><span class="token punctuation">:</span>1<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">/*此时这个类名为bro2的盒子就会盖在3的上面.因为其他元素默认的z-index为0.*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>七层层级</p> <blockquote><p><strong>z-idnex为负数==&gt; 背景 ==&gt; 块级元素(block)层级 ==&gt;  float浮动层 ==&gt; 文本(inline/inline-block)层级  ==&gt;  z-index为0/auto  ==&gt;  z-index为正</strong></p></blockquote> <ol><li><p>同级元素中，后面元素的层级会高于之前层级。</p></li> <li><p>父子元素中，子元素层级会高于父元素层级。</p></li></ol> <p>想要改变层级关系，使用z-index，同级元素中z-index越大层级越高。</p> <p>但z-index不会影响父子元素，父元素调高z-index值也无法比子元素的层级高。</p> <hr> <p>定位水平居中盒子的两种方法.</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code>	<span class="token selector">ul</span><span class="token punctuation">{</span>
			<span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
			<span class="token property">width</span><span class="token punctuation">:</span> 600px<span class="token punctuation">;</span>
			<span class="token property">height</span><span class="token punctuation">:</span> 600px<span class="token punctuation">;</span>
			<span class="token property">margin</span><span class="token punctuation">:</span> 100px auto 0<span class="token punctuation">;</span>
			<span class="token property">border</span><span class="token punctuation">:</span> 2px solid pink<span class="token punctuation">;</span>
		<span class="token punctuation">}</span>
		<span class="token selector">li</span><span class="token punctuation">{</span>
			<span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
			<span class="token property">top</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
			<span class="token property">left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
			<span class="token property">right</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
			<span class="token property">bottom</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
			<span class="token property">margin</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span><span class="token comment">/*只设置绝对定位不给偏移量,左右两边的auto会暂时失效*/</span>
			<span class="token property">width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
			<span class="token property">height</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
			<span class="token property">background-color</span><span class="token punctuation">:</span> pink<span class="token punctuation">;</span>
		<span class="token punctuation">}</span>
	<span class="token comment">/*position的方向值全部设置为0,说明小盒子完全能够分配大盒子的空间.
	  小盒子知道了大盒子上下左右的空间.
	  相当于四只手用弹簧拉它,拉力都是一样的.

	  会在小盒子比大盒子大失效,先margin在定位,定位最后执行*/</span>
	&lt;ul&gt;
		&lt;li&gt;&lt;/li&gt;
	&lt;/ul&gt;
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br></div></div><div class="language-css line-numbers-mode"><pre class="language-css"><code>		<span class="token selector">ul</span><span class="token punctuation">{</span>
			<span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
			<span class="token property">width</span><span class="token punctuation">:</span> 600px<span class="token punctuation">;</span>
			<span class="token property">height</span><span class="token punctuation">:</span> 600px<span class="token punctuation">;</span>
			<span class="token property">margin</span><span class="token punctuation">:</span> 100px auto 0<span class="token punctuation">;</span>
			<span class="token property">border</span><span class="token punctuation">:</span> 2px solid pink<span class="token punctuation">;</span>
		<span class="token punctuation">}</span>
		<span class="token selector">li</span><span class="token punctuation">{</span>
			<span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
			<span class="token property">top</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
			<span class="token property">left</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span><span class="token comment">/*先将盒子的左上角推到大盒子的中心点*/</span>
			<span class="token property">margin-top</span><span class="token punctuation">:</span> -100px<span class="token punctuation">;</span><span class="token comment">/*最后平移margin的负值将元素正中心点对准盒子正中心点,实现上														下垂直居中*/</span>
			<span class="token property">margin-left</span><span class="token punctuation">:</span> -100px<span class="token punctuation">;</span>
			<span class="token property">width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
			<span class="token property">height</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
			<span class="token property">background-color</span><span class="token punctuation">:</span> pink<span class="token punctuation">;</span>
		<span class="token punctuation">}</span>
		
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br></div></div><hr> <h3 id="伪类"><a href="#伪类" class="header-anchor">#</a> <strong>伪类</strong></h3> <blockquote><p>hover选择器左侧必须有选择器，右侧的选择器可以设置也可以不设置</p> <p>当鼠标放在左侧选择器选中的元素的时候代码才会生效</p> <p>hover右侧的选择器只能时选择兄弟元素或是子元素(包括兄弟元素的子元素)</p></blockquote> <p><strong>hover右边选择器</strong></p> <blockquote><p><strong>中间什么都不加(空格)  控制后代元素；</strong></p> <p><strong>&gt;控制子代元素</strong></p> <p><strong>‘+’控制就近元素 ；</strong></p> <p><strong>‘～’ 控制同级元素（兄弟元素）；</strong></p></blockquote></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/./guide/notes/css/09-浮动.html" class="prev">
        07-浮动
      </a></span> <span class="next"><a href="/./guide/notes/css/css样式书写顺序和命名规范.html">
        09-css样式书写顺序和命名规范
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"><!----><div class="reco-bgm-panel" data-v-b1d3339e><audio id="bgm" src="https://www.ytmp3.cn/down/75475.mp3" data-v-b1d3339e></audio> <div class="reco-float-box" style="bottom:30px;z-index:999999;display:none;" data-v-b1d3339e data-v-41bcba48 data-v-b1d3339e><img src="https://p1.music.126.net/qTSIZ27qiFvRoKj-P30BiA==/109951165895951287.jpg?param=200y200" data-v-b1d3339e></div> <div class="reco-bgm-box" style="left:10px;bottom:10px;z-index:999999;" data-v-b1d3339e data-v-41bcba48 data-v-b1d3339e><div class="reco-bgm-cover" style="background-image:url(https://p1.music.126.net/qTSIZ27qiFvRoKj-P30BiA==/109951165895951287.jpg?param=200y200);" data-v-b1d3339e><div class="mini-operation" style="display:none;" data-v-b1d3339e><i class="reco-bgm reco-bgm-pause" style="display:none;" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-play" style="display:none;" data-v-b1d3339e></i></div> <div class="falut-message" style="display:none;" data-v-b1d3339e>
          播放失败
        </div></div> <div class="reco-bgm-info" data-v-b1d3339e data-v-41bcba48 data-v-b1d3339e><div class="info-box" data-v-b1d3339e><i class="reco-bgm reco-bgm-music music" data-v-b1d3339e></i>花花公子</div> <div class="info-box" data-v-b1d3339e><i class="reco-bgm reco-bgm-artist" data-v-b1d3339e></i>马思唯/step.jad</div> <div class="reco-bgm-progress" data-v-b1d3339e><div class="progress-bar" data-v-b1d3339e><div class="bar" data-v-b1d3339e></div></div></div> <div class="reco-bgm-operation" data-v-b1d3339e><i class="reco-bgm reco-bgm-last last" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-pause pause" style="display:none;" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-play play" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-next next" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-volume1 volume" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-mute mute" style="display:none;" data-v-b1d3339e></i> <div class="volume-bar" data-v-b1d3339e><div class="bar" data-v-b1d3339e></div></div></div></div> <div class="reco-bgm-left-box" data-v-b1d3339e data-v-41bcba48 data-v-b1d3339e><i class="reco-bgm reco-bgm-left" data-v-b1d3339e></i></div></div></div></div></div>
    <script src="./assets/js/app.7878252f.js" defer></script><script src="./assets/js/2.877879cc.js" defer></script><script src="./assets/js/25.fbe72655.js" defer></script>
  </body>
</html>
